<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>minitor_of_raspi</title>
    <style type="text/css">
    *{
        margin:0px;
        padding: 0px;
    }
    .title_p {
        font-size:18px;
        text-align:center;
        line-height:24px;
    }
    .info_p{
        font-size:18px;
        text-align:center;
        line-height:25px;
        background-color:#6699CC;
    }
    .dir_button{
        font-size:18px;
        height:40px;
        width:62px;
        background-color:red;
        border:0px;
    }
    .distance_span{
        font-size:18px;
        line-height:24px;
    }
    </style>
</head>
<body>
        <!-- 左边框开始 -->
        <div style="height:540px;width:205px;background-color:#e7e7e7;float:left;margin:5px 0px 5px 5px;" >
            <h4 style="font-size:25px;text-align:center;line-height:40px;">OS INFO</h4>
            <div style="width:180px;margin:0px auto;">
                <!-- 关于IP 的信息 -->
                <p class="title_p">IP address</p>
                <p class="info_p" id="info_ip">192.168.1.200</p>
                <p style="line-height:12px;">&nbsp</p>
                <!-- 关于CPU的信息 -->
                <p class="title_p">CPU</p>
                <p class="info_p" id="info_cpu">60%</p>
                <p style="line-height:12px;">&nbsp</p>        
                <!-- 关于内存的信息 -->
                <p class="title_p">Memory</p>
                <p class="info_p" id="info_memory">15%</p>
                <p style="line-height:12px;">&nbsp</p>        
                <!-- 关于负载的信息 -->
                <p class="title_p">Load</p>
                <p class="info_p" id="info_load">3%</p>
                <p style="line-height:12px;">&nbsp</p>                   
                <!-- 关于硬盘的信息 -->
                <p class="title_p">Disk</p>
                <p class="info_p" id="info_disk">76%</p>
                <p style="line-height:12px;">&nbsp</p>   
                <!-- 关于日期的信息 -->
                <p class="title_p">Date</p>
                <p class="info_p" id="info_date">2018-10-27</p>
                <p style="line-height:12px;">&nbsp</p>   
                <!-- 关于时间的信息 -->
                <p class="title_p">Time</p>
                <p class="info_p" id="info_time">20:39</p>
                <p style="line-height:12px;">&nbsp</p> 
                <!-- 关于当前用户的信息 -->
                <p class="title_p">User</p>
                <p class="info_p" id="info_user">pi</p>
            </div>
        </div>
        <!-- 左边框结束 -->

        <!-- 右上边框开始 -->
        <div style="height:540px;width:720px;background-color:#d7e3ed;float:left;margin:5px;">

            <img src="http://192.168.43.200:8080/?action=stream" style="height:540px;-webkit-transform:rotate(180deg);">
            
        </div>
        <!-- 右上边框结束 -->

        <!-- 右下边框开始 -->
        <div style="height:540px;width:210px;float:left;margin:5px auto;">
            <!-- 控制方向开始 -->
            <div style='height:176px;width:210px;float:left;margin:0px 10px 0px 0px;background-color:#FFFFE0'>
                <!-- 定义距离前面障碍物的距离 -->
                <span style="font-size:18px;line-height:30px;">&nbspFront distance:&nbsp</span>
                <span id="front_distance" style="height:20px;width:130px;font-size:18px;"><font color="blue">disable</font></span>
                <div style="height:20px;"></div>
                <!-- 定义三个方向键的表格 -->
                <table style="margin: 0px auto">                
                <tr>
                    <td/>
                    <td><input type="button" id="forward" value="forward" class="dir_button"/></td>
                    <td/>
                </tr>
                <tr>
                    <td><input type="button" id="turn_left" value="left" class="dir_button"/>
                    </td>
                    <td/>
                    <td><input type="button" id="turn_right" value="right" class="dir_button"/>
                    </td>
                </tr>
                </table>
                
            </div>
            <!-- 控制方向结束 -->

            <!-- 距离感应开始 -->
            <div style='height:176px;width:210px;float:left;margin:5px 0px 0px 0px;background-color:#90b644'>
                <!-- 开启关闭距离感应器 -->
                <span class="distance_span">&nbspDis_detection:</span>
                <input type="radio" name="Distance" value="yes" class="distance_span">
                <span class="distance_span">yes</span>
                <input type="radio" name="Distance" value="no" class="distance_span" checked >
                <span class="distance_span">no</span>
                <!-- 开启关闭超声舵机 -->
                <span class="distance_span">&nbspDistance_scan:</span>
                <input type="radio" name="servo" value="yes" class="distance_span">
                <span class="distance_span">yes</span>
                <input type="radio" name="servo" value="no" class="distance_span" checked>
                <span class="distance_span">no</span>
                <!-- 以图片的形式显示距离扫描的结果 -->
                <img src="static/new_plot.png" height="130px" width="210px" id="myimg">
            </div>
            <!-- 距离感应结束 -->

            <!-- 人体感应开始 -->
            <div style='height:176px;width:210px;float:left;margin:5px 0px 0px 0px;background-color:#d49625'>
                <!-- 人体检测开关 -->
<!--                 <span class="distance_span">&nbspHuman_dect:</span>
                <input type="radio" name="human" value="yes" class="distance_span" checked>
                <span class="distance_span">yes</span>
                <input type="radio" name="human" value="no" class="distance_span">
                <span class="distance_span">no</span>   --> 
                <!-- 以图片显示人体检测结果              -->
                <span class="distance_span">&nbspHuman move:</span><br><br>&nbsp&nbsp&nbsp
                <img src="static/heart_grey.png" height="80px" width="80px">
            </div>
            <!-- 人体感应结束 -->
        </div>
        <!-- 右下边框结束 -->    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>    
    <script>
        // 开始设置刷新左侧系统信息的ajax定时函数
        var get_info={
        url: "sys_info",
        type: "POST",
        dataType: "json",
        success: function (data) {
            // 显示系统信息
            $("#info_ip").text(data.info_ip);
            $("#info_cpu").text(data.info_cpu);
            $("#info_memory").text(data.info_memory);
            $("#info_load").text(data.info_load);
            $("#info_disk").text(data.info_disk);
            $("#info_date").text(data.info_date);
            $("#info_time").text(data.info_time);
            $("#info_user").text(data.info_user);
            // 显示到前方物体的距离
            $("#front_distance").text(data.front_distance)            
            }
        }
        // 每隔一秒钟更新一次显示信息
        window.setInterval(function(){$.ajax(get_info)},1000);
        // 结束设置刷新系统信息的函数

        // 开始控制方向函数
        // 鼠标在莫个方向按钮上按下，触发小车前进/左右转
        $(function(){
                $(".dir_button").mousedown(function(){
                    // alert($(this).val())
                $.ajax({
                url: "sys_control/start",
                type: "POST",
                dataType: "json",
                data:{
                    'car_dir':$(this).val(),
                    'flag':'1',
                },
                success: function () {
                // alert("ok")
                }
            })
            })

        })
        // 鼠标在某个按钮松开，触发停止信号，小车停止运动
        $(function(){
                $(".dir_button").mouseup(function(){
                    // alert($(this).val())
                $.ajax({
                url: "sys_control/end",
                type: "POST",
                dataType: "json",
                data:{
                    'car_dir':$(this).val(),
                },
                success: function () {
                // alert("ok")
                }
            })
            })

        });
        // 结束控制方向函数

        // 开始距离测量单选框，将是否测量距离选项的内容发送到后台
        $('input:radio[name="Distance"]').change( function(){
            var now_Distance = $('input[name="Distance"]:checked').val()
            // alert(now_distance);
            set_Distance_sensor(now_Distance)

        });

        function set_Distance_sensor(now_Distance){
            $.ajax(
            {
                url: "car_sensor/distance",
                type: "POST",
                dataType: "json",
                data:{
                    'dis_sensor':now_Distance,
                },
                success: function () {  
                    // alert("ok");
                    },                
            }
            )
        }
        // 结束是否测量距离单选框


        // 开始超声波扫描单选框，将是否开启超声波扫描发送到后台
        // 不允许连续点击开启按钮
        var check_flag = false;  
        function CheckClick () {  
            NoClick();
        } 
        function NoClick(){
            if (check_flag == true) {  
                alert("提交中...");  
                return false;  
            }  
            check_flag = true;  
        
            setTimeout(function() {  
                check_flag = false;  
            }, 5000);  
            return true;  
        }
        // 开始超声波扫描单选框，将是否开启超声波扫描发送到后台
        $('input:radio[name="servo"]').change( function(){
            var now_servo = $('input[name="servo"]:checked').val()
            // alert(now_distance);
            set_servo_sensor(now_servo)

        });

        function set_servo_sensor(now_servo){
            $.ajax(
            {
                url: "car_sensor/servo",
                type: "POST",
                dataType: "json",
                data:{
                    'servo_sensor':now_servo,
                },
                success: function () {  
                    setTimeout(function(){
                        $("input[name='servo'][value='no']").prop("checked","checked");
                        $.ajax(refresh_img);
                    },4500)
                    
                    },                
            }
            )
        }
        // 结束超声波扫描单选框

        // 开始刷新扫描后图片
        var refresh_img = {
        url: "servo/plot",
        type: "POST",
        dataType: "json",
        success: function (data) {                        
            // $("#myimg").attr("src",data.img_url+"?t="+Math.random());
            $("#myimg").attr("src",data.img_url);
        }

        }

        // 结束刷新扫描后图片
    </script>
</body>